.elementor-2297 .elementor-element.elementor-element-d9ab8d5{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.59;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-d9ab8d5::before, .elementor-2297 .elementor-element.elementor-element-d9ab8d5 > .elementor-background-video-container::before, .elementor-2297 .elementor-element.elementor-element-d9ab8d5 > .e-con-inner > .elementor-background-video-container::before, .elementor-2297 .elementor-element.elementor-element-d9ab8d5 > .elementor-background-slideshow::before, .elementor-2297 .elementor-element.elementor-element-d9ab8d5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2297 .elementor-element.elementor-element-d9ab8d5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0000008C;--background-overlay:'';}.elementor-2297 .elementor-element.elementor-element-0c6063c{--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;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--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-2297 .elementor-element.elementor-element-0c6063c.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-bf7518d .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-289ee33 .elementor-icon-wrapper{text-align:center;}.elementor-2297 .elementor-element.elementor-element-289ee33.elementor-view-stacked .elementor-icon{background-color:#FFFFFF00;}.elementor-2297 .elementor-element.elementor-element-289ee33.elementor-view-framed .elementor-icon, .elementor-2297 .elementor-element.elementor-element-289ee33.elementor-view-default .elementor-icon{color:#FFFFFF00;border-color:#FFFFFF00;}.elementor-2297 .elementor-element.elementor-element-289ee33.elementor-view-framed .elementor-icon, .elementor-2297 .elementor-element.elementor-element-289ee33.elementor-view-default .elementor-icon svg{fill:#FFFFFF00;}.elementor-2297 .elementor-element.elementor-element-289ee33 .elementor-icon{font-size:16px;}.elementor-2297 .elementor-element.elementor-element-289ee33 .elementor-icon svg{height:16px;}.elementor-2297 .elementor-element.elementor-element-8dbd763 .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ef72829{margin:24px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-ef72829 .elementor-heading-title{font-size:60px;font-weight:600;line-height:64px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b2349bb{--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:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:072px;--padding-bottom:20px;--padding-left:30px;--padding-right:30px;}.elementor-2297 .elementor-element.elementor-element-b2349bb:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b2349bb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-a048ffe );}.elementor-2297 .elementor-element.elementor-element-6d2f9f3{--e-image-carousel-slides-to-show:5;}.elementor-2297 .elementor-element.elementor-element-6d2f9f3 .swiper-wrapper{display:flex;align-items:center;}.elementor-2297 .elementor-element.elementor-element-bd4ced6{--display:flex;}.elementor-2297 .elementor-element.elementor-element-16bff78{width:var( --container-widget-width, 594px );max-width:594px;margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--container-widget-width:594px;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-16bff78.elementor-element{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-family:"Outfit", Sans-serif;font-size:60px;font-weight:600;text-transform:none;line-height:64px;letter-spacing:-0.02em;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-family:"Outfit", Sans-serif;font-size:60px;font-weight:600;text-transform:capitalize;line-height:64px;letter-spacing:-0.02em;z-index:auto;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text svg path{stroke-width:2px;-moz-animation-duration:5s;-webkit-animation-duration:5s;-o-animation-duration:5s;-ms-animation-duration:5s;animation-duration:5s;stroke-linecap:round;stroke-linejoin:round;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-2297 .elementor-element.elementor-element-a3c3d73{--display:flex;}.elementor-2297 .elementor-element.elementor-element-3a02abc{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 0px 0px 0px;text-align:center;color:#000000;}.elementor-2297 .elementor-element.elementor-element-3a02abc p{margin-block-end:10px;}.elementor-2297 .elementor-element.elementor-element-11280ed{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-903bca9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-4c56991{--display:flex;}.elementor-2297 .elementor-element.elementor-element-cd0bbfd{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-cd0bbfd:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-cd0bbfd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-cd0bbfd.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-19251e0{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-19251e0:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-19251e0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-19251e0.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-ab4a62f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-ab4a62f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-7694a38{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-7694a38 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-34a975d .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-34a975d .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-34a975d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-34a975d{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-34a975d .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-34a975d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b9c897f{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b9c897f:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b9c897f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b9c897f.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-af6c624{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-af6c624 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-3d27665{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-3d27665 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-64cbb1e .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-64cbb1e .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-64cbb1e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-64cbb1e{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-64cbb1e .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-64cbb1e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6079fc7{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-6079fc7:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-6079fc7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-6079fc7.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-370dfc6{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-370dfc6 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-7fbd885{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-7fbd885 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f56d6d7 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-f56d6d7 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-f56d6d7 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f56d6d7{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-f56d6d7 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-f56d6d7 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-faf1cce{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-faf1cce:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-faf1cce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-faf1cce.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-5c1714a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-5c1714a img{width:100%;}.elementor-2297 .elementor-element.elementor-element-36103f2{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-36103f2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a535bd9 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a535bd9 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a535bd9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a535bd9{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a535bd9 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a535bd9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c6fdeaa{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-c6fdeaa:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-c6fdeaa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-c6fdeaa.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-eefc611{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-eefc611 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-8331975{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-8331975 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-8a42dfc .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-8a42dfc .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-8a42dfc .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-8a42dfc{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-8a42dfc .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-8a42dfc .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-714c80f{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-714c80f:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-714c80f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-714c80f.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-f9e4080{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-f9e4080 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-985f8c2{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-985f8c2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3d6318b .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-3d6318b .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-3d6318b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3d6318b{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-3d6318b .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-3d6318b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6a988b9{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-6a988b9:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-6a988b9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-6a988b9.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-468bb82{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-468bb82 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-754236b{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-754236b .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-2d00583 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-2d00583 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-2d00583 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-2d00583{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-2d00583 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-2d00583 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-0294bcb{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-0294bcb:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-0294bcb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-0294bcb.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-bbb9052{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-bbb9052 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-f927448{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-f927448 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a745a9c .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a745a9c .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a745a9c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a745a9c{width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a745a9c .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a745a9c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-0cbc9fa{--display:flex;}.elementor-2297 .elementor-element.elementor-element-d2ad95a{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-d2ad95a:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d2ad95a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-d2ad95a.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-8fa91a8{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-8fa91a8:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-8fa91a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-8fa91a8.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-ec2f744{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-ec2f744 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-9fd365f{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-9fd365f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a4f84da .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a4f84da .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a4f84da .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a4f84da{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a4f84da .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a4f84da .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3addbed{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-3addbed:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-3addbed > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-3addbed.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-06b0806{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-06b0806 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-80d5797{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-80d5797 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-02e75b0 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-02e75b0 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-02e75b0 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-02e75b0{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-02e75b0 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-02e75b0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d825b9d{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-d825b9d:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d825b9d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-d825b9d.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-51e41d9{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-51e41d9 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-3ffaa16{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-3ffaa16 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5a0e9a6 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-5a0e9a6 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-5a0e9a6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5a0e9a6{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-5a0e9a6 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-5a0e9a6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9a59a10{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-9a59a10:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-9a59a10 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-9a59a10.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-a16e7e5{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-a16e7e5 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-db37dfc{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-db37dfc .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7181e61 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-7181e61 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-7181e61 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7181e61{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-7181e61 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-7181e61 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d0e822a{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-d0e822a:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d0e822a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-d0e822a.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-d3f3d5d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-d3f3d5d img{width:100%;}.elementor-2297 .elementor-element.elementor-element-aa3f575{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-aa3f575 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ca71056 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-ca71056 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-ca71056 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ca71056{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-ca71056 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-ca71056 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9eecffd{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-9eecffd:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-9eecffd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-9eecffd.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-d32ad85{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-d32ad85 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-204402d{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-204402d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6af3213 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-6af3213 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-6af3213 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6af3213{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-6af3213 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-6af3213 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f1f5b86{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-f1f5b86:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-f1f5b86 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-f1f5b86.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-c87383f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-c87383f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-8f4e2f6{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-8f4e2f6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-be0243f .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-be0243f .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-be0243f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-be0243f{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-be0243f .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-be0243f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-89ca332{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-89ca332:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-89ca332 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-89ca332.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-a9ad8b0{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-a9ad8b0 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-da0d87f{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-da0d87f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d1b8ff4 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-d1b8ff4 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-d1b8ff4 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d1b8ff4{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-d1b8ff4 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-d1b8ff4 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e300294{--display:flex;}.elementor-2297 .elementor-element.elementor-element-a8aff8b{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-a8aff8b:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-a8aff8b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-a8aff8b.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-ac23d0b{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-ac23d0b:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-ac23d0b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-ac23d0b.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-2c26a25{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-2c26a25 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-38f9cd7{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-38f9cd7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-93137b0 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-93137b0 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-93137b0 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-93137b0{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-93137b0 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-93137b0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d355f76{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-d355f76:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d355f76 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-d355f76.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-55012fb{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-55012fb img{width:100%;}.elementor-2297 .elementor-element.elementor-element-50e8bfa{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-50e8bfa .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-19164a3 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-19164a3 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-19164a3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-19164a3{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-19164a3 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-19164a3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a9647fc{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-a9647fc:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-a9647fc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-a9647fc.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-fafeee9{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-fafeee9 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-f9cb615{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-f9cb615 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c3fbe18 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-c3fbe18 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-c3fbe18 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c3fbe18{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-c3fbe18 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-c3fbe18 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-09fe807{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-09fe807:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-09fe807 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-09fe807.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-6a27220{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-6a27220 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-635dbc0{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-635dbc0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ad0c054 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-ad0c054 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-ad0c054 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ad0c054{width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-ad0c054 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-ad0c054 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-4eb4c3a{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-4eb4c3a:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-4eb4c3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-4eb4c3a.e-con{--align-self:center;--order:-99999 /* order start hack */;}.elementor-2297 .elementor-element.elementor-element-e3dd029{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-e3dd029 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-9b928e6{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-9b928e6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-60bf283 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-60bf283 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-60bf283 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-60bf283{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-60bf283 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-60bf283 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f8c8071{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-f8c8071:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-f8c8071 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-f8c8071.e-con{--align-self:center;--order:-99999 /* order start hack */;}.elementor-2297 .elementor-element.elementor-element-9f474a6{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-9f474a6 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-0b87dad{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-0b87dad .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-cb0a04b .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-cb0a04b .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-cb0a04b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-cb0a04b{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-cb0a04b .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-cb0a04b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-580755a{--display:flex;}.elementor-2297 .elementor-element.elementor-element-28c1d3f{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-28c1d3f:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-28c1d3f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-28c1d3f.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-75cf20b{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-75cf20b:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-75cf20b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-75cf20b.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-3b0c915{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-3b0c915 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-0e09128{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-0e09128 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-04641a6 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-04641a6 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-04641a6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-04641a6{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-04641a6 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-04641a6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b2f065e{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b2f065e:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b2f065e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b2f065e.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-a93431e{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-a93431e img{width:100%;}.elementor-2297 .elementor-element.elementor-element-0b8b522{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-0b8b522 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-99a94c7 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-99a94c7 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-99a94c7 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-99a94c7{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-99a94c7 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-99a94c7 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-daf7259{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-daf7259:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-daf7259 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-daf7259.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-6190520{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-6190520 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-bd60700{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-bd60700 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f4ce065 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-f4ce065 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-f4ce065 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f4ce065{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-f4ce065 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-f4ce065 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-af40078{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-af40078:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-af40078 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-af40078.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-0a03de7{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-0a03de7 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-60ce238{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-60ce238 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9a44e7e .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-9a44e7e .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-9a44e7e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9a44e7e{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-9a44e7e .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-9a44e7e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-909f5a8{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:30px 0px 0px 0px;--n-tabs-gap:23px;--n-tabs-title-padding-top:10px;--n-tabs-title-padding-right:20px;--n-tabs-title-padding-bottom:10px;--n-tabs-title-padding-left:20px;--n-tabs-title-font-size:16px;--n-tabs-title-color:#000000;--n-tabs-icon-color:#000000;}.elementor-2297 .elementor-element.elementor-element-909f5a8 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-909f5a8.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-909f5a8.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2297 .elementor-element.elementor-element-909f5a8.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-909f5a8.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-2297 .elementor-element.elementor-element-909f5a8 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;--n-tabs-icon-color-hover:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-7d5b0dc{--display:flex;}.elementor-2297 .elementor-element.elementor-element-ee55193{--display:flex;}.elementor-2297 .elementor-element.elementor-element-024ef9a{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-024ef9a:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-024ef9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-024ef9a.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-7f58af2{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-7f58af2:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-7f58af2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-7f58af2.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-bc46f38{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-bc46f38 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-ef01005{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-ef01005 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-44574c2 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-44574c2 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-44574c2 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-44574c2{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-44574c2 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-44574c2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9739e87{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-9739e87:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-9739e87 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-9739e87.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-d027a60{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-d027a60 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-5087322{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-5087322 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3d965d7 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-3d965d7 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-3d965d7 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3d965d7{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-3d965d7 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-3d965d7 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7fc5b02{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-7fc5b02:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-7fc5b02 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-7fc5b02.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-3ecf40f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-3ecf40f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-1f3008b{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-1f3008b .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6c5ae29 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-6c5ae29 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-6c5ae29 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6c5ae29{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-6c5ae29 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-6c5ae29 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d0650f4{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-d0650f4:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d0650f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-d0650f4.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-1506095{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-1506095 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-2634abc{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-2634abc .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6dbddab .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-6dbddab .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-6dbddab .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6dbddab{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-6dbddab .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-6dbddab .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-537ca83{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-537ca83:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-537ca83 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-537ca83.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-c44a9bf{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-c44a9bf img{width:100%;}.elementor-2297 .elementor-element.elementor-element-8954ba3{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-8954ba3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e3c0bd5 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-e3c0bd5 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-e3c0bd5 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e3c0bd5{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-e3c0bd5 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-e3c0bd5 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f12a993{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-f12a993:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-f12a993 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-f12a993.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-ed3be7f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-ed3be7f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-871e133{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-871e133 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7fc8d42 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-7fc8d42 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-7fc8d42 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7fc8d42{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-7fc8d42 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-7fc8d42 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-2d884da{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-2d884da:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-2d884da > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-2d884da.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-1f3ef09{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-1f3ef09 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-946a4a5{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-946a4a5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a87ecb6 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a87ecb6 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a87ecb6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a87ecb6{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a87ecb6 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a87ecb6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c16737f{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-c16737f:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-c16737f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-c16737f.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-0a19dcc{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-0a19dcc img{width:100%;}.elementor-2297 .elementor-element.elementor-element-636ae95{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-636ae95 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1338a2f .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-1338a2f .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-1338a2f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1338a2f{width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-1338a2f .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-1338a2f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-bbc6019{--display:flex;}.elementor-2297 .elementor-element.elementor-element-80e36a5{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-80e36a5:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-80e36a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-80e36a5.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-a8de292{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-a8de292:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-a8de292 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-a8de292.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-69eb008{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-69eb008 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-8288288{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-8288288 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-232dcb9 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-232dcb9 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-232dcb9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-232dcb9{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-232dcb9 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-232dcb9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-93a50e6{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-93a50e6:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-93a50e6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-93a50e6.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-cdf772f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-cdf772f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-45678e3{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-45678e3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-fd05dee .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-fd05dee .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-fd05dee .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-fd05dee{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-fd05dee .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-fd05dee .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b9a3b80{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b9a3b80:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b9a3b80 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b9a3b80.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-6510c44{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-6510c44 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-9ffafe8{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-9ffafe8 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-157851d .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-157851d .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-157851d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-157851d{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-157851d .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-157851d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-4d789d8{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-4d789d8:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-4d789d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-4d789d8.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-33ef82d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-33ef82d img{width:100%;}.elementor-2297 .elementor-element.elementor-element-3756829{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-3756829 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-8a51971 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-8a51971 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-8a51971 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-8a51971{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-8a51971 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-8a51971 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7515459{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-7515459:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-7515459 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-7515459.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-b825928{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-b825928 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-a6cc98d{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-a6cc98d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f157c1d .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-f157c1d .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-f157c1d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f157c1d{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-f157c1d .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-f157c1d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c9ee193{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-c9ee193:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-c9ee193 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-c9ee193.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-c3590bf{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-c3590bf img{width:100%;}.elementor-2297 .elementor-element.elementor-element-348d7a7{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-348d7a7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a759dca .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a759dca .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a759dca .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a759dca{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a759dca .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a759dca .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-87b6a82{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-87b6a82:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-87b6a82 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-87b6a82.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-c07ed7c{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-c07ed7c img{width:100%;}.elementor-2297 .elementor-element.elementor-element-8badfd9{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-8badfd9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5650c63 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-5650c63 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-5650c63 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5650c63{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-5650c63 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-5650c63 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-0233b7b{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-0233b7b:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-0233b7b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-0233b7b.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-ed5d6b7{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-ed5d6b7 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-dc87446{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-dc87446 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9227334 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-9227334 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-9227334 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9227334{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-9227334 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-9227334 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-16b248b{--display:flex;}.elementor-2297 .elementor-element.elementor-element-f84f42f{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-f84f42f:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-f84f42f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-f84f42f.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-b0b1f4b{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b0b1f4b:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b0b1f4b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b0b1f4b.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-bb7e1be{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-bb7e1be img{width:100%;}.elementor-2297 .elementor-element.elementor-element-88c9cd0{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-88c9cd0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-46549ee .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-46549ee .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-46549ee .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-46549ee{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-46549ee .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-46549ee .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1221bdb{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-1221bdb:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-1221bdb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-1221bdb.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-d3877d0{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-d3877d0 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-a83ae6d{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-a83ae6d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7216421 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-7216421 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-7216421 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7216421{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-7216421 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-7216421 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1339d19{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-1339d19:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-1339d19 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-1339d19.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-8c85a1d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-8c85a1d img{width:100%;}.elementor-2297 .elementor-element.elementor-element-98f0fc0{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-98f0fc0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a28d7b6 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a28d7b6 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a28d7b6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a28d7b6{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a28d7b6 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a28d7b6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-99ef874{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-99ef874:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-99ef874 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-99ef874.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-e1504fb{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-e1504fb img{width:100%;}.elementor-2297 .elementor-element.elementor-element-c9a52b6{padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-c9a52b6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-fe1a43a .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-fe1a43a .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-fe1a43a .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-fe1a43a{width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-fe1a43a .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-fe1a43a .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7e6eb53{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-7e6eb53:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-7e6eb53 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-7e6eb53.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-a3fa9c2{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-a3fa9c2 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-bfb034c{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-bfb034c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-2eac826 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-2eac826 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-2eac826 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-2eac826{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-2eac826 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-2eac826 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-45bbb99{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-45bbb99:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-45bbb99 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-45bbb99.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-f4b1d3b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-f4b1d3b img{width:100%;}.elementor-2297 .elementor-element.elementor-element-4b51e9f{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-4b51e9f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5638e1d .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-5638e1d .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-5638e1d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5638e1d{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-5638e1d .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-5638e1d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-02d19c6{--display:flex;}.elementor-2297 .elementor-element.elementor-element-9c9f66c{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-9c9f66c:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-9c9f66c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-9c9f66c.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-7588dbd{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-7588dbd:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-7588dbd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-7588dbd.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-2f6fdb8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-2f6fdb8 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-2de822e{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-2de822e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9468eb2 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-9468eb2 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-9468eb2 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9468eb2{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-9468eb2 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-9468eb2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-f648e73{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-f648e73:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-f648e73 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-f648e73.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-2c3a924{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-2c3a924 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-7c460b4{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-7c460b4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c9c25f3 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-c9c25f3 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-c9c25f3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c9c25f3{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-c9c25f3 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-c9c25f3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a9406c7{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-a9406c7:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-a9406c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-a9406c7.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-92198ba{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-92198ba img{width:100%;}.elementor-2297 .elementor-element.elementor-element-e48a95b{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-e48a95b .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-317b168 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-317b168 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-317b168 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-317b168{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-317b168 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-317b168 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5f3bc2f{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-5f3bc2f:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-5f3bc2f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-5f3bc2f.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-a47cfca{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-a47cfca img{width:100%;}.elementor-2297 .elementor-element.elementor-element-2a350ba{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-2a350ba .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9092923 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-9092923 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-9092923 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9092923{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-9092923 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-9092923 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-dd37270{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-dd37270:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-dd37270 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-dd37270.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-adc8557{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-adc8557 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-35d1aa8{margin:04px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-35d1aa8 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c7e066b .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-c7e066b .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-c7e066b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c7e066b{width:var( --container-widget-width, 100% );max-width:100%;margin:012px 0px calc(var(--kit-widget-spacing, 0px) + 05px) 0px;padding:0px 0px 5px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-c7e066b .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-c7e066b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e33348a{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-e33348a:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-e33348a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-e33348a.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-7916a9d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-7916a9d img{width:100%;}.elementor-2297 .elementor-element.elementor-element-8126783{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-8126783 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-13d5a3d .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-13d5a3d .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-13d5a3d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-13d5a3d{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 15px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-13d5a3d .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-13d5a3d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3ffdfad{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:30px 0px 0px 0px;--n-tabs-gap:23px;--n-tabs-title-padding-top:10px;--n-tabs-title-padding-right:20px;--n-tabs-title-padding-bottom:10px;--n-tabs-title-padding-left:20px;--n-tabs-title-font-size:16px;--n-tabs-title-color:#000000;--n-tabs-icon-color:#000000;}.elementor-2297 .elementor-element.elementor-element-3ffdfad > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3ffdfad.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-3ffdfad.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2297 .elementor-element.elementor-element-3ffdfad.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-3ffdfad.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-2297 .elementor-element.elementor-element-3ffdfad [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;--n-tabs-icon-color-hover:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-100d1fd{--display:flex;}.elementor-2297 .elementor-element.elementor-element-dc6bc6e{--display:flex;}.elementor-2297 .elementor-element.elementor-element-c2f1237{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-c2f1237:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-c2f1237 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-c2f1237.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-903c5c9{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-903c5c9:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-903c5c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-903c5c9.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-83a4dba{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-83a4dba img{width:100%;}.elementor-2297 .elementor-element.elementor-element-69ecfef{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-69ecfef .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ad88a88 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-ad88a88 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-ad88a88 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ad88a88{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-ad88a88 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-ad88a88 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5cf8b13{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-5cf8b13:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-5cf8b13 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-5cf8b13.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-86138ee{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-86138ee img{width:100%;}.elementor-2297 .elementor-element.elementor-element-5dac2b0{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-5dac2b0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5ae4510 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-5ae4510 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-5ae4510 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5ae4510{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-5ae4510 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-5ae4510 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-482a3c9{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-482a3c9:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-482a3c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-482a3c9.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-83eb052{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-83eb052 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-4962c70{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-4962c70 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6b8f194 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-6b8f194 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-6b8f194 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6b8f194{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-6b8f194 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-6b8f194 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-efa2039{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-efa2039:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-efa2039 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-efa2039.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-3c81577{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-3c81577 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-2b08c9f{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-2b08c9f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-4f3364b .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-4f3364b .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-4f3364b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-4f3364b{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-4f3364b .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-4f3364b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d13ce56{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-d13ce56:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d13ce56 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-d13ce56.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-4b0363a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-4b0363a img{width:100%;}.elementor-2297 .elementor-element.elementor-element-53a7c39{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-53a7c39 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-62e82ef .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-62e82ef .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-62e82ef .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-62e82ef{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-62e82ef .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-62e82ef .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-45ca4ce{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-45ca4ce:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-45ca4ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-45ca4ce.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-412d24c{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-412d24c img{width:100%;}.elementor-2297 .elementor-element.elementor-element-8637330{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-8637330 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6dbe875 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-6dbe875 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-6dbe875 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6dbe875{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-6dbe875 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-6dbe875 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-8c2d98c{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-8c2d98c:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-8c2d98c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-8c2d98c.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-fabf2a3{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-fabf2a3 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-ce89d37{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-ce89d37 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-bfc09d1 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-bfc09d1 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-bfc09d1 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-bfc09d1{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-bfc09d1 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-bfc09d1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-07927ae{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-07927ae:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-07927ae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-07927ae.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-9fb1724{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-9fb1724 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-bf32ca4{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-bf32ca4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ef82ad9 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-ef82ad9 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-ef82ad9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ef82ad9{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-ef82ad9 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-ef82ad9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-35a274b{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-35a274b:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-35a274b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-35a274b.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-0e3667f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-0e3667f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-d7b903d{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-d7b903d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5537471 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-5537471 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-5537471 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-5537471{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-5537471 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-5537471 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d18aac2{--display:flex;}.elementor-2297 .elementor-element.elementor-element-4a85557{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-4a85557:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-4a85557 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-4a85557.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-e778acf{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-e778acf:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-e778acf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-e778acf.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-7065f1b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-7065f1b img{width:100%;}.elementor-2297 .elementor-element.elementor-element-afd0da7{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-afd0da7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3769c3d .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-3769c3d .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-3769c3d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3769c3d{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-3769c3d .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-3769c3d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d2019a9{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-d2019a9:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d2019a9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-d2019a9.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-6280e10{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-6280e10 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-c4d90ae{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-c4d90ae .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d43ec4e .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-d43ec4e .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-d43ec4e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d43ec4e{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-d43ec4e .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-d43ec4e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c6da2c1{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-c6da2c1:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-c6da2c1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-c6da2c1.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-3fec1a8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-3fec1a8 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-12fc89d{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-12fc89d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a6ef2d1 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a6ef2d1 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a6ef2d1 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a6ef2d1{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a6ef2d1 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a6ef2d1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-040f33f{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-040f33f:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-040f33f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-040f33f.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-7b097d9{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-7b097d9 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-4399d67{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-4399d67 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7311649 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-7311649 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-7311649 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7311649{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-7311649 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-7311649 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a5c59f2{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-a5c59f2:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-a5c59f2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-a5c59f2.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-d059ba0{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-d059ba0 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-3f70009{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-3f70009 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c568f85 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-c568f85 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-c568f85 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-c568f85{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-c568f85 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-c568f85 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-06becff{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-06becff:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-06becff > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-06becff.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-5f90213{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-5f90213 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-ffcaab4{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-ffcaab4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e5ba888 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-e5ba888 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-e5ba888 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e5ba888{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-e5ba888 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-e5ba888 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6a92b6c{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-6a92b6c:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-6a92b6c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-6a92b6c.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-c55ad77{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-c55ad77 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-493a2fc{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-493a2fc .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-702d1ff .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-702d1ff .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-702d1ff .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-702d1ff{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-702d1ff .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-702d1ff .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-73dc393{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-73dc393:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-73dc393 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-73dc393.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-5dbc89f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-5dbc89f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-2f954a0{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-2f954a0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ef64093 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-ef64093 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-ef64093 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ef64093{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-ef64093 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-ef64093 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1331dfa{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-1331dfa:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-1331dfa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-1331dfa.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-f3dd8fc{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-f3dd8fc img{width:100%;}.elementor-2297 .elementor-element.elementor-element-58501d7{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-58501d7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6aef118 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-6aef118 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-6aef118 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6aef118{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-6aef118 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-6aef118 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-baddae5{--display:flex;}.elementor-2297 .elementor-element.elementor-element-606db4e{--display:flex;}.elementor-2297 .elementor-element.elementor-element-17dc979{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:30px 0px 0px 0px;--n-tabs-gap:23px;--n-tabs-title-padding-top:10px;--n-tabs-title-padding-right:20px;--n-tabs-title-padding-bottom:10px;--n-tabs-title-padding-left:20px;--n-tabs-title-font-size:16px;--n-tabs-title-color:#000000;--n-tabs-icon-color:#000000;}.elementor-2297 .elementor-element.elementor-element-17dc979 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-17dc979.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-17dc979.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2297 .elementor-element.elementor-element-17dc979.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-17dc979.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-2297 .elementor-element.elementor-element-17dc979 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;--n-tabs-icon-color-hover:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-ea59e8c{--display:flex;}.elementor-2297 .elementor-element.elementor-element-d2cf36a{--display:flex;}.elementor-2297 .elementor-element.elementor-element-862ca35{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-862ca35:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-862ca35 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-862ca35.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-b4b6a42{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b4b6a42:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b4b6a42 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b4b6a42.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-6f05fa2{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-6f05fa2 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-f4ca6e5{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-f4ca6e5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-06287d3 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-06287d3 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-06287d3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-06287d3{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-06287d3 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-06287d3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1a6ad9d{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-1a6ad9d:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-1a6ad9d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-1a6ad9d.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-ed3cd5e{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-ed3cd5e img{width:100%;}.elementor-2297 .elementor-element.elementor-element-7e25c91{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-7e25c91 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1beab51 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-1beab51 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-1beab51 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1beab51{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-1beab51 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-1beab51 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-6f837e1{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-6f837e1:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-6f837e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-6f837e1.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-0ee384f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-0ee384f img{width:100%;}.elementor-2297 .elementor-element.elementor-element-d9ea6b7{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-d9ea6b7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d27ad00 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-d27ad00 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-d27ad00 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d27ad00{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-d27ad00 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-d27ad00 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-2169b05{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-2169b05:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-2169b05 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-2169b05.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-b624028{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-b624028 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-4b99f9b{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-4b99f9b .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b9765e8 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-b9765e8 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-b9765e8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b9765e8{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-b9765e8 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-b9765e8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-11aca93{--display:flex;}.elementor-2297 .elementor-element.elementor-element-e6ee40c{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-e6ee40c:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-e6ee40c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-e6ee40c.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-7c91649{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-7c91649:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-7c91649 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-7c91649.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-cbf760a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-cbf760a img{width:100%;}.elementor-2297 .elementor-element.elementor-element-eafbeeb{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-eafbeeb .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-68dff29 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-68dff29 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-68dff29 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-68dff29{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-68dff29 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-68dff29 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b27e366{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b27e366:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b27e366 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b27e366.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-2b88cbe{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-2b88cbe img{width:100%;}.elementor-2297 .elementor-element.elementor-element-63733df{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-63733df .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-96b607b .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-96b607b .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-96b607b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-96b607b{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-96b607b .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-96b607b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-bebcfa9{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-bebcfa9:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-bebcfa9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-bebcfa9.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-fc1c99a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-fc1c99a img{width:100%;}.elementor-2297 .elementor-element.elementor-element-9795cfa{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-9795cfa .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ab4fdf8 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-ab4fdf8 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-ab4fdf8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-ab4fdf8{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-ab4fdf8 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-ab4fdf8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b8099f0{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b8099f0:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b8099f0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b8099f0.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-434856a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-434856a img{width:100%;}.elementor-2297 .elementor-element.elementor-element-cbbbf66{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-cbbbf66 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1bbd652 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-1bbd652 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-1bbd652 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-1bbd652{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-1bbd652 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-1bbd652 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-fdcb2f8{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:30px 0px 0px 0px;--n-tabs-gap:23px;--n-tabs-title-padding-top:10px;--n-tabs-title-padding-right:20px;--n-tabs-title-padding-bottom:10px;--n-tabs-title-padding-left:20px;--n-tabs-title-font-size:16px;--n-tabs-title-color:#000000;--n-tabs-icon-color:#000000;}.elementor-2297 .elementor-element.elementor-element-fdcb2f8 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-fdcb2f8.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-fdcb2f8.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2297 .elementor-element.elementor-element-fdcb2f8.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-fdcb2f8.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-2297 .elementor-element.elementor-element-fdcb2f8 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;--n-tabs-icon-color-hover:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-5b88164{--display:flex;}.elementor-2297 .elementor-element.elementor-element-19f6910{--display:flex;}.elementor-2297 .elementor-element.elementor-element-86ca503{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-86ca503:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-86ca503 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-86ca503.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-69c085e{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-69c085e:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-69c085e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-69c085e.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-b99aa8a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-b99aa8a img{width:100%;}.elementor-2297 .elementor-element.elementor-element-4e08013{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-4e08013 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e08d0e2 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-e08d0e2 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-e08d0e2 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-e08d0e2{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-e08d0e2 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-e08d0e2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-77d03bb{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-77d03bb:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-77d03bb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-77d03bb.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-1fa34d1{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-1fa34d1 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-264adc9{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-264adc9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-cc8ea7e .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-cc8ea7e .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-cc8ea7e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-cc8ea7e{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-cc8ea7e .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-cc8ea7e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3922e7a{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-3922e7a:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-3922e7a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-3922e7a.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-e295c02{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-e295c02 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-267bfbf{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-267bfbf .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-50ed472 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-50ed472 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-50ed472 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-50ed472{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-50ed472 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-50ed472 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-d7a0e34{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-d7a0e34:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-d7a0e34 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-d7a0e34.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-471f7f8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-471f7f8 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-e9e424f{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-e9e424f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-455d2dd .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-455d2dd .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-455d2dd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-455d2dd{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-455d2dd .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-455d2dd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-0bdeb14{--display:flex;}.elementor-2297 .elementor-element.elementor-element-0036d49{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-2297 .elementor-element.elementor-element-0036d49:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-0036d49 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-0036d49.e-con{--align-self:flex-end;}.elementor-2297 .elementor-element.elementor-element-1261f23{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-1261f23:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-1261f23 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-1261f23.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-76b18cc{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-76b18cc img{width:100%;}.elementor-2297 .elementor-element.elementor-element-ab762f9{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-ab762f9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-30e72fd .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-30e72fd .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-30e72fd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-30e72fd{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-30e72fd .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-30e72fd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-3e4c894{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-3e4c894:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-3e4c894 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-3e4c894.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-4f14e48{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-4f14e48 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-a6dd95a{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-a6dd95a .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a3f90a9 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-a3f90a9 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-a3f90a9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-a3f90a9{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-a3f90a9 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-a3f90a9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-816c530{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-816c530:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-816c530 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-816c530.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-56f3bee{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-56f3bee img{width:100%;}.elementor-2297 .elementor-element.elementor-element-2bb607f{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-2bb607f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-26d75eb .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-26d75eb .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-26d75eb .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-26d75eb{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-26d75eb .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-26d75eb .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-b644117{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2297 .elementor-element.elementor-element-b644117:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-b644117 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-b644117.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-3d2ffb5{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-2297 .elementor-element.elementor-element-3d2ffb5 img{width:100%;}.elementor-2297 .elementor-element.elementor-element-3ff0876{padding:20px 05px 0px 05px;text-align:center;}.elementor-2297 .elementor-element.elementor-element-3ff0876 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9ca02d3 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:16px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:6px 13px 6px 13px;}.elementor-2297 .elementor-element.elementor-element-9ca02d3 .elementor-button:hover, .elementor-2297 .elementor-element.elementor-element-9ca02d3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-9ca02d3{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2297 .elementor-element.elementor-element-9ca02d3 .elementor-button:hover svg, .elementor-2297 .elementor-element.elementor-element-9ca02d3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-8646304{--display:flex;}.elementor-2297 .elementor-element.elementor-element-7a1504c{--display:flex;}.elementor-2297 .elementor-element.elementor-element-83c90fd{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:30px 0px 0px 0px;--n-tabs-gap:23px;--n-tabs-title-padding-top:10px;--n-tabs-title-padding-right:20px;--n-tabs-title-padding-bottom:10px;--n-tabs-title-padding-left:20px;--n-tabs-title-font-size:16px;--n-tabs-title-color:#000000;--n-tabs-icon-color:#000000;}.elementor-2297 .elementor-element.elementor-element-83c90fd > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-83c90fd.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-3c1df16 );}.elementor-2297 .elementor-element.elementor-element-83c90fd.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2297 .elementor-element.elementor-element-83c90fd.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-83c90fd.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-2297 .elementor-element.elementor-element-83c90fd [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;--n-tabs-icon-color-hover:var( --e-global-color-primary );}.elementor-2297 .elementor-element.elementor-element-1a7c432{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:0px 0px 20px 10px;--n-tabs-title-gap:8px;--n-tabs-gap:24px;--n-tabs-title-border-radius:100px 100px 100px 100px;--n-tabs-title-color:#FFFFFF;--n-tabs-title-color-active:#EDEDED;}.elementor-2297 .elementor-element.elementor-element-1a7c432 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#001D8C;}.elementor-2297 .elementor-element.elementor-element-1a7c432.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-a048ffe );}.elementor-2297 .elementor-element.elementor-element-1a7c432.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2297 .elementor-element.elementor-element-1a7c432.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#E71E26;}.elementor-2297 .elementor-element.elementor-element-1a7c432 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;}.elementor-2297 .elementor-element.elementor-element-db7c90c{--display:flex;}.elementor-2297 .elementor-element.elementor-element-4e55570{--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:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:30px;--margin-bottom:1px;--margin-left:0px;--margin-right:0px;--padding-top:54px;--padding-bottom:124px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-741445c{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-8d67676{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 12px) 0px;--icon-box-icon-margin:8px;}.elementor-2297 .elementor-element.elementor-element-8d67676 .elementor-icon-box-wrapper{align-items:center;}.elementor-2297 .elementor-element.elementor-element-8d67676 .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-2297 .elementor-element.elementor-element-8d67676.elementor-view-stacked .elementor-icon{background-color:#02010100;}.elementor-2297 .elementor-element.elementor-element-8d67676.elementor-view-framed .elementor-icon, .elementor-2297 .elementor-element.elementor-element-8d67676.elementor-view-default .elementor-icon{fill:#02010100;color:#02010100;border-color:#02010100;}.elementor-2297 .elementor-element.elementor-element-8d67676 .elementor-icon{font-size:20px;}.elementor-2297 .elementor-element.elementor-element-8d67676 .elementor-icon-box-title, .elementor-2297 .elementor-element.elementor-element-8d67676 .elementor-icon-box-title a{font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;line-height:24px;letter-spacing:-0.04em;}.elementor-2297 .elementor-element.elementor-element-875508f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-family:"Outfit", Sans-serif;font-size:60px;text-transform:none;line-height:64px;letter-spacing:-0.02em;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-family:"Outfit", Sans-serif;font-size:60px;font-weight:600;text-transform:capitalize;line-height:64px;letter-spacing:-0.02em;z-index:auto;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#001D8C;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text svg path{stroke-width:2px;-moz-animation-duration:5s;-webkit-animation-duration:5s;-o-animation-duration:5s;-ms-animation-duration:5s;animation-duration:5s;stroke-linecap:round;stroke-linejoin:round;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-2297 .elementor-element.elementor-element-a1879f5{--display:flex;--min-height:536px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:8px 8px 8px 8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-a1879f5:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-a1879f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://stark.edu.np/wp-content/uploads/2025/07/markus-leo-p_Q8El-tS-M-unsplash.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2297 .elementor-element.elementor-element-7eb9eeb{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:8px 8px 8px 8px;box-shadow:24px 32px 88px 0px rgba(22, 22, 19, 0.1);--margin-top:-260px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:60px;--padding-left:60px;--padding-right:60px;--z-index:1;}.elementor-2297 .elementor-element.elementor-element-7eb9eeb:not(.elementor-motion-effects-element-type-background), .elementor-2297 .elementor-element.elementor-element-7eb9eeb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2297 .elementor-element.elementor-element-7eb9eeb.e-con{--align-self:center;}.elementor-2297 .elementor-element.elementor-element-379f65d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-2297 .elementor-element.elementor-element-379f65d .elementor-heading-title{font-size:32px;font-weight:600;line-height:40px;letter-spacing:-0.02em;color:#AB0C2F;}.elementor-2297 .elementor-element.elementor-element-6637517{--display:flex;--margin-top:-160px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-2297 .elementor-element.elementor-element-6a5c850{margin:00px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2297 .elementor-element.elementor-element-6a5c850 iframe{height:550px;}@media(max-width:1366px){.elementor-2297 .elementor-element.elementor-element-cd0bbfd{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-d2ad95a{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-a8aff8b{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-28c1d3f{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-024ef9a{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-80e36a5{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-f84f42f{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-9c9f66c{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-c2f1237{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-4a85557{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-862ca35{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-e6ee40c{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-86ca503{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-0036d49{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-7eb9eeb{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:1024px){.elementor-2297 .elementor-element.elementor-element-d9ab8d5{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-2297 .elementor-element.elementor-element-b2349bb{--padding-top:50px;--padding-bottom:80px;--padding-left:30px;--padding-right:30px;}.elementor-2297 .elementor-element.elementor-element-6d2f9f3{--e-image-carousel-slides-to-show:3;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-2297 .elementor-element.elementor-element-cd0bbfd{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-d2ad95a{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-a8aff8b{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-28c1d3f{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-024ef9a{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-80e36a5{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-f84f42f{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-9c9f66c{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-c2f1237{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-4a85557{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-862ca35{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-e6ee40c{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-86ca503{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-0036d49{--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-4e55570{--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;}.elementor-2297 .elementor-element.elementor-element-a1879f5{--min-height:440px;}}@media(max-width:767px){.elementor-2297 .elementor-element.elementor-element-d9ab8d5{--min-height:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-2297 .elementor-element.elementor-element-0c6063c{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2297 .elementor-element.elementor-element-ef72829{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2297 .elementor-element.elementor-element-ef72829 .elementor-heading-title{font-size:48px;line-height:1.1em;}.elementor-2297 .elementor-element.elementor-element-b2349bb{--padding-top:40px;--padding-bottom:65px;--padding-left:20px;--padding-right:20px;}.elementor-2297 .elementor-element.elementor-element-6d2f9f3{--e-image-carousel-slides-to-show:2;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-2297 .elementor-element.elementor-element-16bff78 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-2297 .elementor-element.elementor-element-cd0bbfd{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-d2ad95a{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-a8aff8b{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-28c1d3f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-024ef9a{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-80e36a5{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-f84f42f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-9c9f66c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-c2f1237{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-4a85557{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-862ca35{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-e6ee40c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-86ca503{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-0036d49{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2297 .elementor-element.elementor-element-4e55570{--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-2297 .elementor-element.elementor-element-875508f .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-2297 .elementor-element.elementor-element-7eb9eeb{--width:90% !important;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-2297 .elementor-element.elementor-element-d9ab8d5{--content-width:1200px;}.elementor-2297 .elementor-element.elementor-element-0c6063c{--width:fit-content;}.elementor-2297 .elementor-element.elementor-element-19251e0{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b9c897f{--width:90%;}.elementor-2297 .elementor-element.elementor-element-6079fc7{--width:90%;}.elementor-2297 .elementor-element.elementor-element-faf1cce{--width:90%;}.elementor-2297 .elementor-element.elementor-element-c6fdeaa{--width:90%;}.elementor-2297 .elementor-element.elementor-element-714c80f{--width:90%;}.elementor-2297 .elementor-element.elementor-element-6a988b9{--width:90%;}.elementor-2297 .elementor-element.elementor-element-0294bcb{--width:90%;}.elementor-2297 .elementor-element.elementor-element-8fa91a8{--width:90%;}.elementor-2297 .elementor-element.elementor-element-3addbed{--width:90%;}.elementor-2297 .elementor-element.elementor-element-d825b9d{--width:90%;}.elementor-2297 .elementor-element.elementor-element-9a59a10{--width:90%;}.elementor-2297 .elementor-element.elementor-element-d0e822a{--width:90%;}.elementor-2297 .elementor-element.elementor-element-9eecffd{--width:90%;}.elementor-2297 .elementor-element.elementor-element-f1f5b86{--width:90%;}.elementor-2297 .elementor-element.elementor-element-89ca332{--width:90%;}.elementor-2297 .elementor-element.elementor-element-ac23d0b{--width:90%;}.elementor-2297 .elementor-element.elementor-element-d355f76{--width:90%;}.elementor-2297 .elementor-element.elementor-element-a9647fc{--width:90%;}.elementor-2297 .elementor-element.elementor-element-09fe807{--width:90%;}.elementor-2297 .elementor-element.elementor-element-4eb4c3a{--width:90%;}.elementor-2297 .elementor-element.elementor-element-f8c8071{--width:90%;}.elementor-2297 .elementor-element.elementor-element-75cf20b{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b2f065e{--width:90%;}.elementor-2297 .elementor-element.elementor-element-daf7259{--width:90%;}.elementor-2297 .elementor-element.elementor-element-af40078{--width:90%;}.elementor-2297 .elementor-element.elementor-element-7f58af2{--width:90%;}.elementor-2297 .elementor-element.elementor-element-9739e87{--width:90%;}.elementor-2297 .elementor-element.elementor-element-7fc5b02{--width:90%;}.elementor-2297 .elementor-element.elementor-element-d0650f4{--width:90%;}.elementor-2297 .elementor-element.elementor-element-537ca83{--width:90%;}.elementor-2297 .elementor-element.elementor-element-f12a993{--width:90%;}.elementor-2297 .elementor-element.elementor-element-2d884da{--width:90%;}.elementor-2297 .elementor-element.elementor-element-c16737f{--width:90%;}.elementor-2297 .elementor-element.elementor-element-a8de292{--width:90%;}.elementor-2297 .elementor-element.elementor-element-93a50e6{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b9a3b80{--width:90%;}.elementor-2297 .elementor-element.elementor-element-4d789d8{--width:90%;}.elementor-2297 .elementor-element.elementor-element-7515459{--width:90%;}.elementor-2297 .elementor-element.elementor-element-c9ee193{--width:90%;}.elementor-2297 .elementor-element.elementor-element-87b6a82{--width:90%;}.elementor-2297 .elementor-element.elementor-element-0233b7b{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b0b1f4b{--width:90%;}.elementor-2297 .elementor-element.elementor-element-1221bdb{--width:90%;}.elementor-2297 .elementor-element.elementor-element-1339d19{--width:90%;}.elementor-2297 .elementor-element.elementor-element-99ef874{--width:90%;}.elementor-2297 .elementor-element.elementor-element-7e6eb53{--width:90%;}.elementor-2297 .elementor-element.elementor-element-45bbb99{--width:90%;}.elementor-2297 .elementor-element.elementor-element-7588dbd{--width:90%;}.elementor-2297 .elementor-element.elementor-element-f648e73{--width:90%;}.elementor-2297 .elementor-element.elementor-element-a9406c7{--width:90%;}.elementor-2297 .elementor-element.elementor-element-5f3bc2f{--width:90%;}.elementor-2297 .elementor-element.elementor-element-dd37270{--width:90%;}.elementor-2297 .elementor-element.elementor-element-e33348a{--width:90%;}.elementor-2297 .elementor-element.elementor-element-903c5c9{--width:90%;}.elementor-2297 .elementor-element.elementor-element-5cf8b13{--width:90%;}.elementor-2297 .elementor-element.elementor-element-482a3c9{--width:90%;}.elementor-2297 .elementor-element.elementor-element-efa2039{--width:90%;}.elementor-2297 .elementor-element.elementor-element-d13ce56{--width:90%;}.elementor-2297 .elementor-element.elementor-element-45ca4ce{--width:90%;}.elementor-2297 .elementor-element.elementor-element-8c2d98c{--width:90%;}.elementor-2297 .elementor-element.elementor-element-07927ae{--width:90%;}.elementor-2297 .elementor-element.elementor-element-35a274b{--width:90%;}.elementor-2297 .elementor-element.elementor-element-e778acf{--width:90%;}.elementor-2297 .elementor-element.elementor-element-d2019a9{--width:90%;}.elementor-2297 .elementor-element.elementor-element-c6da2c1{--width:90%;}.elementor-2297 .elementor-element.elementor-element-040f33f{--width:90%;}.elementor-2297 .elementor-element.elementor-element-a5c59f2{--width:90%;}.elementor-2297 .elementor-element.elementor-element-06becff{--width:90%;}.elementor-2297 .elementor-element.elementor-element-6a92b6c{--width:90%;}.elementor-2297 .elementor-element.elementor-element-73dc393{--width:90%;}.elementor-2297 .elementor-element.elementor-element-1331dfa{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b4b6a42{--width:90%;}.elementor-2297 .elementor-element.elementor-element-1a6ad9d{--width:90%;}.elementor-2297 .elementor-element.elementor-element-6f837e1{--width:90%;}.elementor-2297 .elementor-element.elementor-element-2169b05{--width:90%;}.elementor-2297 .elementor-element.elementor-element-7c91649{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b27e366{--width:90%;}.elementor-2297 .elementor-element.elementor-element-bebcfa9{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b8099f0{--width:90%;}.elementor-2297 .elementor-element.elementor-element-69c085e{--width:90%;}.elementor-2297 .elementor-element.elementor-element-77d03bb{--width:90%;}.elementor-2297 .elementor-element.elementor-element-3922e7a{--width:90%;}.elementor-2297 .elementor-element.elementor-element-d7a0e34{--width:90%;}.elementor-2297 .elementor-element.elementor-element-1261f23{--width:90%;}.elementor-2297 .elementor-element.elementor-element-3e4c894{--width:90%;}.elementor-2297 .elementor-element.elementor-element-816c530{--width:90%;}.elementor-2297 .elementor-element.elementor-element-b644117{--width:90%;}.elementor-2297 .elementor-element.elementor-element-4e55570{--content-width:1200px;}.elementor-2297 .elementor-element.elementor-element-7eb9eeb{--width:1000px;}}@media(max-width:1366px) and (min-width:768px){.elementor-2297 .elementor-element.elementor-element-7eb9eeb{--width:871px !important;}}@media(max-width:1024px) and (min-width:768px){.elementor-2297 .elementor-element.elementor-element-7eb9eeb{--width:90% !important;}}/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ab4a62f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-19251e0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-af6c624 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c897f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-370dfc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6079fc7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5c1714a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-faf1cce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eefc611 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6fdeaa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f9e4080 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-714c80f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-468bb82 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a988b9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bbb9052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0294bcb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ec2f744 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fa91a8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-06b0806 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3addbed *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-51e41d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d825b9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a16e7e5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9a59a10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3f3d5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0e822a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d32ad85 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9eecffd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c87383f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1f5b86 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a9ad8b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-89ca332 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c26a25 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac23d0b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55012fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d355f76 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fafeee9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9647fc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a27220 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09fe807 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3dd029 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4eb4c3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9f474a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8c8071 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3b0c915 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75cf20b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a93431e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2f065e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6190520 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-daf7259 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a03de7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af40078 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bc46f38 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7f58af2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d027a60 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9739e87 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ecf40f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7fc5b02 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1506095 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d0650f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c44a9bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-537ca83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3be7f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f12a993 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f3ef09 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d884da *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0a19dcc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c16737f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69eb008 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8de292 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cdf772f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-93a50e6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6510c44 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9a3b80 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-33ef82d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4d789d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b825928 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7515459 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c3590bf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9ee193 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c07ed7c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87b6a82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed5d6b7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0233b7b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bb7e1be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0b1f4b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d3877d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1221bdb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c85a1d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1339d19 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e1504fb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-99ef874 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a3fa9c2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6eb53 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f4b1d3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45bbb99 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2f6fdb8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7588dbd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2c3a924 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f648e73 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-92198ba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a9406c7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a47cfca *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f3bc2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-adc8557 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dd37270 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7916a9d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e33348a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83a4dba *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-903c5c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-86138ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf8b13 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-83eb052 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-482a3c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c81577 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efa2039 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4b0363a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d13ce56 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-412d24c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-45ca4ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fabf2a3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c2d98c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9fb1724 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-07927ae *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e3667f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-35a274b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7065f1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e778acf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6280e10 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2019a9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3fec1a8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c6da2c1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7b097d9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-040f33f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d059ba0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5c59f2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5f90213 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-06becff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c55ad77 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a92b6c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5dbc89f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73dc393 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f3dd8fc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1331dfa *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6f05fa2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b4b6a42 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ed3cd5e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a6ad9d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0ee384f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f837e1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b624028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2169b05 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbf760a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c91649 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b88cbe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b27e366 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fc1c99a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bebcfa9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-434856a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8099f0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b99aa8a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69c085e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1fa34d1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77d03bb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e295c02 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3922e7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-471f7f8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d7a0e34 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-76b18cc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1261f23 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4f14e48 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e4c894 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-56f3bee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-816c530 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3d2ffb5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b644117 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */